/*
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-09 19:18:13
 */
import { PlusOutlined } from '@ant-design/icons'

import { IAttrInfoList } from '@/api/attr/attrType'
import { getAsyncCategory1List, getAsyncCategory2List, getAsyncCategory3List, getCategory2List, getCategory3List, setCategory1Id, setCategory2Id, setCategory3Id} from '@/app/category'
import { useAppDispatch, useAppSelector } from '@/app/hooks'
import { Button, Card, Divider, Select, Space, Table, Tag } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { reqAttrInfoList } from '@/api/attr/attr'

export default function Attr() {
  let [loading,setLoading]=useState<boolean>(false)

  // #region  三级列表逻辑
    // 使用store里的数据
    let category=useAppSelector(state=>state.category)

    let [category2Value,setCategory2Value]=useState<number>()
    let [category3Value,setCategory3Value]=useState<number>()

    let dispatch=useAppDispatch()
      useEffect(()=>{
        // 获取一级列表
        dispatch(getAsyncCategory1List())
        
      },[])

      // 获取到1级列表id获取二级列表
      const getCategory1Id=async (value:number)=>{
        // 保存1级id
        dispatch(setCategory1Id(value))
        const res=await dispatch(getAsyncCategory2List(value))
        
        // 选择一级列表修改二级列表属性
        setCategory2Value(res[0].id)
        getCategory2Id(res[0].id)
        
        
      }

      // 获取到2级列表id获取三级列表
      const getCategory2Id=async (value:number)=>{
        // 二级列表发生改变时重新赋值
        setCategory2Value(value)

        // 保存2级id
        dispatch(setCategory2Id(value))
        const res=await dispatch(getAsyncCategory3List(value))

        // 选择二级列表修改三级列表属性和保存
        setCategory3Value(res[0].id)
        dispatch(setCategory3Id(res[0].id))
      }
      // 获取到3级列表id获取三级列表
        // 保存1级id
      const getCategory3Id=(value:number)=>{
        setCategory3Value(value)
        // 保存3级id
        dispatch(setCategory3Id(value))
      }

//#endregion
      
let [attrList,setAttrList]=useState<IAttrInfoList[]>([])

    useEffect(()=>{
      async function main(){
        console.log(category.category1Id as number,
          category.category2Id as number,
          category.category3Id as number);
        
        if(category.category3Id){
          setLoading(true)
          const res=await reqAttrInfoList(
            category.category1Id as number,
            category.category2Id as number,
            category.category3Id as number)
            setAttrList(res.data)
            setLoading(false)
        }
      }
      main()
    },[category.category3Id])

    useEffect(()=>{
      return () => {
        dispatch(setCategory1Id(null))
        dispatch(setCategory2Id(null))
        dispatch(setCategory3Id(null))
        dispatch(getCategory2List([]))
        dispatch(getCategory3List([]))
      }
    },[])
const columns:ColumnsType<any> = [
    {
      title: '序号',
      width: 100,
      align: "center",
      render: (value: any, record: any, index: number) => {
        return index + 1
      }
    },
    {
      title: '属性名称',
      dataIndex: 'attrName',
      align:'center'
      
    },
    {
      title: '属性值名称列表',
      dataIndex: 'attrValueList',
      width:400,
      align:'center',
      render:(key,row:IAttrInfoList)=>{
        return  <>
        {
          row.attrValueList.map((item)=>{
            return <Tag color="magenta">{item.valueName}</Tag>
          })
        }
        </>
      }
    },
    {
      title: '操作',
      align:'center',
      width:300,
      render:(row)=>{
        return <>
          <Button type="primary" >修改</Button>
          <Button className='ml' type="primary" danger>删除</Button>
        </>
      }

    },
  ];
  return (
    <Card>
      <Space wrap className='ml'>
        <span>一级列表:</span>
        <Select
          placeholder={'请选择一级列表'}
          style={{ width: 200 }}
          options={category.category1List.map((category1) => ({ label: category1.name, value: category1.id }))}
          onChange={getCategory1Id}
        />
        <span>二级列表:</span>
        <Select
          placeholder={'请选择二级列表'}
          value={category2Value}
          style={{ width: 200 }}
          options={category.category2List.map((category2) => ({ label: category2.name, value: category2.id }))}
          onChange={getCategory2Id}
        />
        <span>三级列表:</span>
        <Select
          placeholder={'请选择三级列表'}
          style={{ width: 200 }}
          value={category3Value}
          options={category.category3List.map((category3) => ({ label: category3.name, value: category3.id }))}
          onChange={getCategory3Id}
        />
    </Space>

      {/* 表格 */}
      <Divider />
      <Button shape="round" className='ml' type="primary"  icon={<PlusOutlined rev={undefined} />}>
      添加属性
      </Button>
      <Table 
        className='mt ml'
        rowKey={'id'}
        size="small"
        bordered 
        columns={columns} 
        dataSource={attrList} 
        loading={loading}
        pagination={
        {hideOnSinglePage :true}
        }
        />
    </Card>
  )
}
